Missing ESLint + Prettier Integration in Frontend #56 #77
Missing ESLint + Prettier Integration in Frontend #56 #77chaitanyak175 wants to merge 1 commit intoCommunity-Programmer:mainfrom
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR establishes a comprehensive code quality and formatting infrastructure for the frontend-react project by integrating ESLint and Prettier with automated enforcement mechanisms to address inconsistent code formatting.
Key Changes:
- Configured ESLint with React, TypeScript, accessibility, and Prettier integration
- Set up Prettier with consistent formatting rules and ignore patterns
- Added pre-commit hooks via Husky and lint-staged to enforce code quality before commits
- Integrated linting and formatting checks into GitHub Actions CI pipeline
Reviewed Changes
Copilot reviewed 9 out of 10 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend-react/src/lib/utils.ts | Applied automated formatting (added semicolons) |
| frontend-react/package.json | Added linting/formatting scripts, dependencies (prettier, husky, lint-staged, eslint plugins), and lint-staged configuration |
| frontend-react/eslint.config.js | Expanded ESLint configuration with React, accessibility, and Prettier rules |
| frontend-react/.vscode/extensions.json | Added VS Code extension recommendations for ESLint, Prettier, and Tailwind CSS |
| frontend-react/.prettierrc | Created Prettier configuration with formatting standards |
| frontend-react/.prettierignore | Defined files and directories to exclude from Prettier formatting |
| frontend-react/.husky/pre-commit | Set up pre-commit hook to run lint-staged |
| frontend-react/.github/workflows/lint.yml | Created CI workflow for linting, formatting, type-checking, and build validation |
| frontend-react/.editorconfig | Added EditorConfig for consistent coding styles across editors |
Comments suppressed due to low confidence (1)
frontend-react/.editorconfig:1
- Inconsistent line length limits: Prettier is configured with printWidth: 80 in .prettierrc, while EditorConfig specifies max_line_length = 100. These should be aligned to the same value to avoid confusion.
# EditorConfig helps maintain consistent coding styles
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| "react-router-dom": "^7.4.1", | ||
| "react-spinners": "^0.15.0", | ||
| "recharts": "^2.15.1", | ||
| "redux": "^5.0.1", |
There was a problem hiding this comment.
The redux dependency appears unrelated to the ESLint/Prettier integration described in this PR. Consider removing this dependency or explaining its inclusion in the PR description.
| "redux": "^5.0.1", |
| indent_size = 2 | ||
| insert_final_newline = true | ||
| trim_trailing_whitespace = true | ||
| max_line_length = 100 |
There was a problem hiding this comment.
Inconsistent line length limits: Prettier is configured with printWidth: 80 in .prettierrc, while EditorConfig specifies max_line_length = 100. These should be aligned to the same value to avoid confusion.
| max_line_length = 100 | |
| max_line_length = 80 |
1 participant
name: 🚀 Pull Request
about: Propose changes to improve the project
title: "[FEATURE] Integrate ESLint + Prettier with Pre-commit Hooks & CI Enforcement"
labels: ''
assignees: ''
📝 Description
This PR establishes a comprehensive code quality infrastructure for the frontend-react project by integrating ESLint and Prettier with automated enforcement through pre-commit hooks and CI/CD pipelines.
Fixes #56 : Inconsistent code formatting and lack of automated style enforcement across the codebase.
🛠 Changes
✅ Checklist
I have updated documentation if necessary📸 Screenshots (if applicable)
If your change affects the UI, add screenshots to illustrate.
📚 Additional Notes
New Dependencies Added:
eslint-config-prettier, eslint-plugin-react, eslint-plugin-react-hooks
prettier, husky, lint-staged